.code-container {
  width: 900px;
  height: 500px;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.preview {
  background-color: black;
  color: white;
  border: 1px solid gray;
  border-radius: 5px;
}

.code {
  padding-left: 20px;
  border-left: 1px dashed lightgray;
}

.generate {
  position: relative;

  .loading {
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: aqua;
    z-index: 99;
  }

  .container {
    display: flex;

    .toolbar {
      width: 200px;
      background-color: red;
      align-items: stretch;

      .icons {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 30px;
        font-size: 18px;
      }
    }

    .content {
      height: calc(100vh - 64px);
      background-color: #f0f0f0;
      background-color: blue;
      overflow: scroll;
      flex: 1;

      .page {
        padding: 20px;
        width: 540px;
        margin: 10px;
        border-radius: 5px;

        .test-container {
          width: 800px;
          border-radius: 5px;
          padding: 10px;
          margin: 10px;
          background-color: white;

          .test-content {
            min-height: 100px;
            border-radius: 5px;

            .active {
              border: 1px solid #00c365;
            }

            .test-line {
              border-bottom: 1px solid #efefef;
              width: 800px;
              height: calc(100vh - 200px);
              overflow: auto;
              line-height: 40px;
              text-indent: 20px;
            }
          }
        }
      }
    }
  }
}

#textarea {
  width: 1px;
  height: 1px;
  visibility: hidden;
}
